.footer {
	position: fixed;
	bottom: 0.4rem;
	width: 98%;
	display: flex;
	justify-content: space-around;
	box-sizing: border-box;
	max-width: 100%;
	margin: 0 1%;
	padding: 0.4rem 1rem;
	background: rgba(255, 255, 255, 0.8);
	border-radius: 2rem;

	.btn {
		width: 10rem;
	}

	.bottom-slider {
		margin: 0 1rem;
	}
}

/* 翻页动画样式 */

/* 实体书翻页动画 - 共享样式 */
.page-forward-enter-active,
.page-forward-leave-active,
.page-backward-enter-active,
.page-backward-leave-active {
	transition: all var(--animation-speed, 0.5s) ease;
	transform-style: preserve-3d;
	backface-visibility: hidden;
}

/* 实体书向前翻页（下一页） */
.page-forward-enter-from {
	transform: rotateY(-180deg);
	opacity: 0;
}

.page-forward-leave-to {
	transform: rotateY(180deg);
	// opacity: 0;
}

/* 实体书向后翻页（上一页） */
.page-backward-enter-from {
	transform: rotateY(180deg);
	opacity: 0;
}

.page-backward-leave-to {
	transform: rotateY(-180deg);
	// opacity: 0;
}

/* 为翻页动画添加透视效果 */
.single-page-img-box,
.double-page-img-box {
	perspective: 1500px;
	transform-origin: left center;
	transition: transform var(--animation-speed, 0.5s) ease;
}

.single-page-img {
	transform-origin: left center;
	transition: transform var(--animation-speed, 0.5s) ease;
}

/* 当翻页方向为向前时，调整旋转轴心到右侧 */
.page-forward-enter-from,
.page-forward-leave-to {
	transform-origin: right center;
}

/* 滑动和淡入淡出动画样式 */
.fade-enter-active,
.fade-leave-active {
	transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
	opacity: 0;
}

.slide-left-enter-active,
.slide-left-leave-active,
.slide-right-enter-active,
.slide-right-leave-active {
	transition: all 0.3s ease;
}

/* 从右向左滑动（下一页） */
.slide-left-enter-from {
	transform: translateX(100%);
	opacity: 0;
}

.slide-left-leave-to {
	transform: translateX(-100%);
	opacity: 0;
}

/* 从左向右滑动（上一页） */
.slide-right-enter-from {
	transform: translateX(-100%);
	opacity: 0;
}

.slide-right-leave-to {
	transform: translateX(100%);
	opacity: 0;
}

@media only screen and (min-width: 1200px) {
	.single-page .footer {
		.btn {
			padding: 0;
			width: 8rem;
		}
	}

	:deep(.el-pagination__jump) {
		margin-left: 0.4rem;
	}
}

@media only screen and (max-width: 1199px) and (min-width: 768px) {
	:deep(.el-pagination__jump) {
		margin-left: 0.8rem;
	}
}

@media only screen and (max-width: 767px) {
	.footer {
		.btn {
			display: none;
		}
	}

	:deep(.el-pagination__jump) {
		margin-left: 0.4rem;
	}
}

.footer {
	.btn {
	}
}
